<template>
  <!-- 第二级单元 -->
  <div class="exhibits-box">
    <div class="exhibits-right">
      <div class="exhibits-right-box">
        <div class="arrow-box-left" @click="changeCurrent(-1)" :style="{ opacity: isCurrentFirst ? '0.3' : '1' }">
          <arrowLeft />
          <div :style="{ color: store.styleInfo.shmentColor }">上一单元</div>
        </div>
        <div class="exhibits-righ-dot" v-if="store.styleInfo.styleType !== 3">
          <dotIcon :ischange="1" fontsize="24px" />
          <div class="item-box">
            <span :style="{ color: store.styleInfo.fontColor }">{{ currentItem.text }}</span>
          </div>
          <dotIcon :ischange="1" fontsize="24px" />
        </div>
        <div v-else style="position: relative; width: 300px" class="iconbox-parent">
          <div style="text-align: center" class="iconbox">
            <i class="iconfonts" :style="{ color: store.styleInfo.themeColor }">&#xe6a5;</i>
          </div>
          <div>
            <span class="currentItemText">{{ currentItem.text }}</span>
          </div>
        </div>

        <div class="arrow-box-left" @click="changeCurrent(1)" :style="{ opacity: isCurrentLast ? '0.3' : '1' }">
          <div :style="{ color: store.styleInfo.shmentColor }">下一单元</div>
          <arrowRight />
        </div>
      </div>
      <div class="exhibits-right-heard">
        <img
          class="banner-img"
          :src="$filters.getLinkUrl(info.children[current].value + '?imageView2/1/w/820/h/328/format/webp')"
          alt=""
        />
        <span :style="{ fontFamily: store.styleInfo.fontFamily }">{{ currentItem.remarks }}</span>
      </div>
    </div>
    <!-- 第三级单元 -->
    <pageChild2Vue :current="current" v-if="currentItem.children.length > 0" />
    <!-- <pageChild1Vue :current="current" v-else /> -->
    <!-- 是否有展品 -->
    <pageChildItem3
      :id="info.children[current].id"
      v-if="currentItem.showpieceTotal > 0 && currentItem.children.length === 0"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed, watch, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';
import dotIcon from './dotIcon.vue';
import arrowLeft from './arrowLeft.vue';
import arrowRight from './arrowRight.vue';
import pageChild1Vue from './pageChild1.vue';
import pageChild2Vue from './pageChild2.vue';
import pageChildItem3 from './pageChildItem3.vue';
const store = useProjectStore();
const { childModel, styleInfo } = storeToRefs(store);
const router = useRouter();
const route = useRoute();
const current = ref(0);

const info = computed(() => store.childModel);

const currentItem = computed(() => info.value.children[current.value]);

const isCurrentFirst = computed(() => current.value === 0);

const isCurrentLast = computed(() => current.value === info.value.children.length - 1);

const changeCurrent = (delta) => {
  if (isCurrentFirst.value && delta < 0) {
    return;
  }
  if (isCurrentLast.value && delta > 0) {
    return;
  }
  current.value += delta;
};

const setCurrent = (index) => {
  current.value = index;
};

watch(
  () => route.query.current,
  (value) => {
    // console.log('value', value);

    current.value = Number(value || 0);
  },
  { deep: true, immediate: true },
);
watch(
  () => styleInfo,
  (value) => {
    const foundElement = styleInfo.value.moduleList.find((item) => item.id === store.childModel.id);
    store.setchildModel(foundElement);
  },
  { immediate: true, deep: true },
);
</script>

<style lang="less" scoped>
.title-box {
  font-size: 17px;
  font-family: SourceHanSerif;
  font-weight: 500;
  color: #333333;
  line-height: 32px;
  margin-top: 50px;
}
.exhibits-box {
  // display: flex;
  width: 100%;

  // height: 930px;
}
.exhibits-left {
  padding: 8px 21px;
  width: 256px;
  height: 600px;
  overflow-y: auto;
  color: #333333;
}
.item-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;

  font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
  // width: 100%;
  padding: 0 30px;
  // height: 64px;
  // overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.exhibits-right-heard {
  width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  margin-bottom: 50px;
  position: relative;
  text-indent: 2em;
  img {
    width: 100%;
    height: auto;
  }
  span {
    width: 100%;
    font-weight: 500;
    color: #333333;
    line-height: 32px;
    margin-top: 32px;
    text-indent: 2rem;
  }
}
.exhibits-right {
  width: 980px;
  display: flex;
  flex-direction: column;
  // overflow: hidden;
  margin: auto;
  padding: 0 21px;
  flex: 1;
  position: relative;
  margin-top: 80px;
}
.t-row {
  margin: 0;
}
.exhibits-item {
  display: flex;
  flex-direction: column;
  width: 100%;

  img {
    height: 280px;
    background: #f0e9e1;
    // width: 100%;
    // height: 210px;
  }
}
.item-title {
  width: 100%;
  padding: 24px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  span {
    font-size: 18px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    font-weight: 500;
    color: #333333;
    line-height: 28px;
  }
}
.exhibits-content {
  width: 100%;
  margin: auto;
  // margin-top: 50px;
  margin-bottom: 80px;
  background: #f0e9e1;
}
.scroll-x-box {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 40px;
  overflow: hidden;
  overflow-x: auto;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.scroll-x-box-item {
  display: flex;
  justify-content: center;
  cursor: pointer;
  border: none;
  text-align: center;
  padding: 8px 0;
  // width: 100px;
  margin: 0 40px;
  span {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
}
.scroll-x-box-item-active {
  border-bottom: 1px solid transparent;
}
.is-null-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 50px 0;
  span {
    font-size: 24px;
    font-family: SourceHanSerif;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
    line-height: 22px;
  }
}
.exhibits-righ-dot {
  display: flex;
  justify-content: center;
  align-items: center;
}
.exhibits-right-box {
  width: 980px;
  height: 30px;
  margin: auto;

  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  z-index: 101;
  left: 0px;
  top: -80px;
}
.arrow-box-left {
  display: flex;
  cursor: pointer;
  font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  .icon-boxs {
    width: 20% !important;
    padding: 0 5px;
  }
  > div {
    width: 80%;
    text-align: center;
  }
}
.currentItemText {
  position: absolute;
  top: 0;
}
.iconbox-parent {
  position: relative;
  display: flex;
  align-items: center;
  .currentItemText {
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
  }
}

.iconbox {
  width: 100%;
  height: 100%;
  .iconfonts {
    font-size: 32px;
  }
}
</style>
